<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>10_事件监听</title>
</head>
<body>

<button onclick="alert('警告框')">弹出警告框</button>
<button id="btn">我是按钮</button>
<hr>
<h4>注意：天气转凉了，你应该做这些事...</h4>


<div>Aliquid assumenda consequatur cum eius mollitia nam nemo quos totam voluptatem? Asperiores culpa debitis dolore
    enim facere hic iusto libero molestiae pariatur provident quaerat, quibusdam, quo quod sequi ut veritatis.
</div>
<div>Adipisci at debitis dolorem earum hic illo incidunt, maxime molestiae nihil nisi nulla, officia omnis placeat,
    porro recusandae sed soluta ut voluptatibus! Cumque deleniti eaque exercitationem quos reiciendis vel vitae!
</div>

<script>
    let buttonE=document.querySelector('#btn');
    buttonE.addEventListener('click',function (){
        alert('按钮被点击了！');
    });

    let h4E=document.querySelector('h4');
    h4E.addEventListener('mouseover',function (){
        console.log('该标题被查看了')
    });

    // window.addEventListener('resize',function () {
    //     alert('窗口大小倍改变了')
    //
    // });
    // window.addEventListener('scroll',function () {
    //     alert('页面被滚动了')
    // });


    // 对象自带属性和方法
    let p1={
        name:'张三',
        age:18,
        say:function () {
            console.log('我是'+this.name+'今年'+this.age+'岁');

        }

    };
    console.log(p1.name);
    console.log(p1.age);
    p1.say();

    //2创建一个空对象，在动态给添加属性与方法
    let p2={};
    p2.name='李四';
    p2.age=19;
    p2.say=function () {
        console.log('我是'+this.name+'今年'+this.age+'岁');
    };
    console.log(p2.name);
    console.log(p2.age);
    p2.say();



</script>

</body>
</html>